<template>
  <div class="mod-box">
    <h3>预订人信息</h3>
   <van-cell-group>

      <van-field
        v-model="name"
        label="联系人"
        clearable
        placeholder="请填写联系人姓名"
        error-message=""
      >
      <!-- <van-icon slot="right-icon" class-prefix="ucai-icon" name="tongxunlu"/> 联系人弹窗，暂时不做-->
      </van-field>

      <van-field
        v-model="phone"
        type="tel"
        clearable
        maxlength="11"
        label="手机号码"
        placeholder="请输入手机号"
        error-message=""
      />
      <van-field
        v-if="cus_login"
        v-model="captcha"
        @focus="codeColor = true"
        @blur="codeColor = false"
        :class="codeColor ? 'active' : ''"
        label="验证码"
        clearable
        type="tel" 
        maxlength="6" 
        placeholder="请输入短信验证码"
      >
        <sms-wrap slot="button" :phone="phone" ref="smsSend" @afterSend="afterSend" />
      </van-field>

      <van-field
        v-model="remark"
        rows="1"
        autosize
        maxlength="50"
        type="textarea"
        clearable
        label="备注"
        placeholder="选填，给商家留言（50个字以内）"
      />
  </van-cell-group>

  <!--出行人列表（新增/更换）弹窗-->
  <traveler-list-popup :showPicker.sync="showPicker" :travelersList="travelersList"/>
  </div>
</template>

<script>
	import { 
    Field,
    CellGroup,
    Icon,
  } from "vant"
  import travelerListPopup from '@views/booking/components/traveler-list-popup'
  import SendSms from '@cmpt_com/sms';
  import { getRolePrice } from '@utils/role'
  import {
    isLogin,
  } from '@utils/storage_base_config'

  export default {
    name: "booker-info",
    data(){
        return {
            showPicker: false,
            name: this.contact_name,
            phone: this.contact_phone,
            remark: '',

            captcha: '',
            once_str: '',
            codeColor: false,
            cus_login: false, // 是否需要短信验证码。
            isVisitorPrice: getRolePrice() === '0', // 是否展示游客价
        }
    },

    components:{
      [Field.name]: Field,
      [CellGroup.name]: CellGroup,
      [Icon.name]: Icon,
      [travelerListPopup.name]: travelerListPopup,
      [SendSms.name]: SendSms,
    },

    props: ["travelersList","contact_name","contact_phone","package_traveler"],

    watch: {
      contact_name(newVal) {
        this.name = newVal;
      },
      contact_phone(newVal) {
        this.phone = newVal;
      },
      name(newVal){
        this.$parent.formData.contact_name = newVal;
      },
      phone(newVal) {
        this.$parent.formData.contact_phone = newVal;
      },
      remark(newVal) {
        this.$parent.formData.remark = newVal
      },
      captcha(nw) {
        this.$parent.formData.captcha = nw
      },
      once_str(nw) {
        this.$parent.formData.once_str = nw
      },

      package_traveler(newVal){
        this.$nextTick(() => {
          if(!isLogin() && this.package_traveler.length==0){
            this.cus_login = true;
          }
        })
      },
    },

    methods:{
        //联系人列表
        contactList(){
          this.showPicker = true;
        },
        afterSend(str){
          this.once_str = str
        },
    },
  }
</script>

<style lang="less" scoped>
@import "~@style_m/basic/utils/index";
.mod-box{
  background: #fff;
  border-radius: 5px;
  margin: 10px;
  h3{
    padding-left: 16px;
    font-size: 16px;
    font-weight: 400;
    line-height: 48px;
  }

  .ucai-icon-tongxunlu{
    font-size: 18px;
    color: @color-main;
  }
}
.van-field__button .send-sms{
  font-size: 14px;
}
</style>
